<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.bianhua{
				width: 100px;
				height: 100px;
				position: absolute;
				left: 800px;
				top: 100px;
				background-color: deepskyblue;
				animation:mymove 3s linear  infinite ;
			}
		@keyframes mymove
				{
			0%{
				-webkit-transform: rotateZ(90deg);
				
			}
			
		100%	{
				width: 100px;
				height: 100px;
				border-radius: 100px;
				-webkit-transform:scale(2);
				background-color: red;
			}

			}
			

			
		</style>
	</head>
	<body>
		
		<!--作业: 求出abcdgbcdabddaabbdgbb 这个字符串中 出现次数最高的字符, 并输出其出现的次数!
			- CSS3新增伪类选择器有哪些?
			- 用CSS编写, div旋转90度, 0.5秒后变圆, 0.5秒后放大?
			- 列举2种强制类型转换和1种隐式类型装换?
			- split()和join()的区别?-->
			
			
			
			<h1>字符串中出现次数最高的字符, 以及次数</h1>
			<script>
				
				
			
var str = 'asdfssaaasasasasaa';
		var json = {};
		for (var i=0;i<str.length;i++) {
			if (!json[str.charAt(i)]) {//charAt() 方法可返回指定位置的字符
				 // 首先得到i位置的字符char  再判断 json[char]是否存在 如果不存在就赋值为1
				json[str.charAt(i)] = 1;
			} else{ //如果存在 就在原来值的基础上加1
				json[str.charAt(i)]++;
			}
		}
//		console.log(json);//Object {a: 9, s: 7, d: 1, f: 1}
//		console.log(json.a);//9
		var iMax = 0;
		var iIndex = '';
		for(var i in json){//遍历JSON对象
			console.log(json[i]);//9，7，1，1
			if(json[i]>iMax){
				iMax = json[i];
				iIndex = i;
			}
		}
		console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

			
			</script>
			
			
			
			
			<hr />
		
								<h1>CSS3新增伪类选择器有哪些?</h1>	
					
				<p>:first-of-type    p:first-of-type    选择属于其父元素的首个 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</p>     
				<p>:last-of-type    p:last-of-type    选择属于其父元素的最后 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</p>
				<p>:only-of-type    p:only-of-type    选择属于其父元素唯一的 &lt;p&gt; 元素的每个&lt;p&gt; 元素。</p>
				<p>:only-child    p:only-child    选择属于其父元素的唯一子元素的每个 &lt;p&gt; 元素。</p>
				<p>:nth-child(n)    p:nth-child(2)    选择属于其父元素的第二个子元素的每个 &lt;p&gt; 元素。 </p>
				<p>:nth-last-child(n)    p:nth-last-child(2)    同上，从最后一个子元素开始计数。</p>
				<p>:nth-of-type(n)    p:nth-of-type(2)    选择属于其父元素第二个&lt;p&gt; 元素的每个 &lt;p&gt; 元素。</p>   
				<p>:nth-last-of-type(n)    p:nth-last-of-type(2)    同上，但是从最后一个子元素开始计数。     </p>
				<p>:last-child    p:last-child    选择属于其父元素最后一个子元素每个&lt;p&gt; 元素。</p>  
				<p>:root    :root    选择文档的根元素。  </p> 
				<p>:empty    p:empty    选择没有子元素的每个&lt;p&gt; 元素（包括文本节点）。  </p>
				<p>:target    #news:target    选择当前活动的 #news 元素。</p>
				<p>:enabled    input:enabled    选择每个启用的&lt;input&gt; 元素。  </p>
				<p>:disabled    input:disabled    选择每个禁用的 &lt;input&gt;元素  </p>
				<p>:checked    input:checked    选择每个被选中的 &lt;input&gt; 元素。</p>  
				<p>:not(selector)    :not(p)    选择非 &lt;p&gt; 元素的每个元素。</p>
				<p>::selection    ::selection    选择被用户选取的元素部分。</p>
	
			
			
	 <h1>旋转变圆</h1> 
			<div class="bianhua">
				
			</div>
			<hr />
			
			<!--强制类型转换-- 隐式类型转换-->
			<script>
				var a = "123";
//			console.log(Number(a));
				
				var b = 123;
//				console.log(b.toString());
				
				
				var Q= 12, W= '21';
				var c = Q + W ++
//				console.log(c);
				
				
			</script>
			
			<hr />
			
			
									<h1>split()和join()的区别?</h1>
				
			<div>	Join 函数获取一批字符串，然后用分隔符字符串将它们联接起来，从而返回一个字符串。
				Split 函数获取一个字符串，然后在分隔符处将其断开，从而返回一批字符串。但是，这两个
				函数之间的主要区别在于 Join 可以使用任何分隔符字符串将多个字符串连接起来，而 Split 
				只能使用一个字符分隔符将字符串断开。
				简单地说，如果你用split，是把一串字符（根据某个分隔符）分成若干个元素存放在一个数组里。
				而Join是把数组中的字符串连成一个长串，可以大体上认为是split的逆操作。</div>
		
			
			
		
	</body>
</html>
